<template>
  <div class="invoice">
    <el-tabs v-model="activeKey" @tab-click="handleClick">
      <el-tab-pane label="可开发票" name="1"> </el-tab-pane>
      <el-tab-pane label="开票历史" name="2"></el-tab-pane>
    </el-tabs>
    <el-card>
      <div class="switch">
        <el-switch v-model="value1" inactive-text="固定表头"> </el-switch>
        <el-button
          @click="handleClick(scope.row)"
          type="primary"
          class="width120"
          >批量处理</el-button
        >
      </div>
      <el-table :data="dataList" @selection-change="handleSelectionChange">
        <template slot="empty">
        <el-empty :image="require('@/assets/imgs/middleWork/k1.png')" :image-size="80" description='暂无相关数据'></el-empty>
      </template>
        <el-table-column show-overflow-tooltip type="selection" width="55">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          align="center"
          label="流水订单号"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          align="center"
          label="消费类型"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          align="center"
          label="可开票金额/元"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="address"
          align="center"
          label="支付状态"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"
              >申请开票</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "invoiceVue",
  data() {
    return {
      activeKey: "1",
      value1: true,
      dataList: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.invoice {
  min-width: 1200px;
  .switch {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
